<template>
  <view class="my-container">
    <view style="margin-top: 120rpx;"></view>
    <!-- 用户信息卡片 -->
        <view class="user-info">
          <uni-icons type="person" size="40" color="#007AFF" />
          <view class="user-detail">
            <text class="username">{{ userInfo.name || '未登录' }}</text>
            <text class="phone">{{ userInfo.phone || '点击登录' }}</text>
            <view class="stats-grid">
              <view class="stats-item">
                <text>运营成本</text>
                <text class="value">{{ userInfo.operating_cost || '0.00' }}</text>
              </view>
              <view class="stats-item">
                <text>投资收益</text>
                <text class="value">{{ userInfo.total_investment || '0.00' }}</text>
              </view>
            </view>
          </view>
        </view>
    <!-- 功能列表 -->
    <uni-list class="function-list">
      <!-- 修改为点击事件方式 -->
      <uni-list-item 
        title="商品管理" 
        clickable
        @click="navigateToProduct"
        show-extra-icon 
        :extra-icon="{type: 'compose', color: '#007AFF'}"
      />
      <uni-list-item title="投资收益" link="navigateTo" to="/pages/finance/invest" show-extra-icon 
        :extra-icon="{type: 'wallet', color: '#DD524D'}"/>
      <uni-list-item title="支出记录" link="navigateTo" to="/pages/finance/personal" show-extra-icon 
        :extra-icon="{type: 'cart', color: '#FFCC00'}"/>
      
      <!-- 添加登出按钮 -->
      <uni-list-item 
        title="退出登录" 
        clickable
        @click="handleLogout"
        show-extra-icon 
        :extra-icon="{
          type: 'poweroff',
          color: '#DD524D',
          size: 22
        }"
      />
    </uni-list>

    <!-- 底部导航 -->
    <tab-bar />
  </view>
</template>

<script>
import TabBar from '@/components/tab-bar/tab-bar.vue'
import authApi from '@/utils/auth.js'

export default {
  components: {
    TabBar
  },
  data() {
    return {
      userInfo: {
        real_name: '张三',
        phone: '138****5678',
        operating_cost: '15,200.00',
        total_investment: '82,450.00'
      }
    }
  },
  onShow() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      const userInfo = uni.getStorageSync('userInfo')
      console.log('userInfo', userInfo)
      if (userInfo) {
        this.userInfo = JSON.parse(userInfo)
      }
    },
    async handleLogout() {
      console.log('handleLogout')
      try {
        await authApi.logout()
        // 清除本地存储的用户信息
        uni.removeStorageSync('userInfo')
        uni.showToast({
          title: '已登出',
          icon: 'success'
        })
        // 登出后跳转到登录页
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/login/index'
          })
        }, 1500)
      } catch (error) {
        uni.showToast({
          title: '登出失败',
          icon: 'none'
        })
      }
    },
    navigateToProduct() {
        uni.navigateTo({
            url: '/pages/product/index'
        });
    }
  }
}
</script>

<style>
.my-container {
	padding-top: 60rpx;
  padding: 20rpx;
  background-color: #f8f9fa;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 20rpx;
}

.user-detail {
  margin-left: 30rpx;
  flex: 1;
}

.username {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.phone {
  font-size: 26rpx;
  color: #666;
}

.stats-grid {
  display: flex;
  margin-top: 20rpx;
  gap: 30rpx;
}

.stats-item {
  flex: 1;
}

.stats-item text {
  display: block;
  font-size: 26rpx;
  color: #999;
}

.stats-item .value {
  font-size: 28rpx;
  color: #007AFF;
  font-weight: 500;
  margin-top: 8rpx;
}

.function-list {
  margin-top: 30rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

/* 可以添加登出按钮的特殊样式 */
.logout-button {
  margin-top: 30rpx;
}
</style>